<template>
  <div class="summary-wrapper">
    <div class="inner">
      <header class="header">
        <h1>{{ field }}运势总结</h1>
      </header>
      <div class="content">{{ content || '加载中...' }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Summary',
  props: {
    field: String,
    content: String
  }

}
</script>

<style lang="scss" scoped>
  .summary-wrapper {
    padding: 0 .1rem .1rem;
    box-sizing: border-box;

    .inner {
      border-radius: .05rem;
      border: 1px solid #ddd;
      overflow: hidden;

      .header {
        height: .35rem;
        background-color: #C71585;
        color: #fff;
        font-size: .16rem;
        text-align: center;
        line-height: .35rem;
      }

      .content {
        background-color: #fff;
        font-size: .14rem;
        padding: .1rem;
        text-indent: 2em;
        line-height: .2rem;
      }
    }
  }
</style>